<template>
  <div class="habitableroomDetail">
    <div class="top">
      <div class="border"></div>
      <h3 v-if="type == 'add'">{{ residentDetail.add }}</h3>
      <h3 v-else>{{ residentDetail.fix }}</h3>
    </div>
    <div class="main" ref="habitableroomDetail">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-form-item :label="residentDetail.sort" prop="oldmanNo">
          <el-input
            :disabled="isEditor"
            v-model.trim="ruleForm.oldmanNo"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 姓名拼音 -->
        <el-row type="flex">
          <el-col :span="5">
            <el-form-item
              :label="residentDetail.firstName1"
              prop="oldSurnameSpell"
            >
              <el-input
                :disabled="isEditor"
                v-model.trim="ruleForm.oldSurnameSpell"
                maxlength="9"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="residentDetail.lastName1" prop="oldNameSpell">
              <el-input
                :disabled="isEditor"
                v-model.trim="ruleForm.oldNameSpell"
                maxlength="9"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 姓名 -->
        <el-row type="flex">
          <el-col :span="5">
            <el-form-item :label="residentDetail.firstName2" prop="oldSurname">
              <el-input
                :disabled="isEditor"
                v-model.trim="ruleForm.oldSurname"
                maxlength="9"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item :label="residentDetail.lastName2" prop="oldFirstName">
              <el-input
                :disabled="isEditor"
                v-model.trim="ruleForm.oldFirstName"
                maxlength="9"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 编号 -->
        <el-row type="flex">
          <el-col :span="5">
            <el-form-item :label="residentDetail.build" prop="buildingName">
              <el-select
                :disabled="isEditor"
                v-model="ruleForm.buildingName"
                @change="changeBuild"
              >
                <el-option
                  v-for="item in buildList"
                  :key="item.value"
                  :label="item.buildingName"
                  :value="item.buildingId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--
            <el-col :span="5">
              <el-form-item :label="residentDetail.floor" prop="floor">
                <el-select :disabled="isEditor" v-model="ruleForm.floor" @change="changeFloor">
                  <el-option
                    v-for="item in floorList"
                    :key="item.floorNo"
                    :label="item.floorNo"
                    :value="item.floorNo"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          -->
          <el-col :span="5">
            <el-form-item :label="residentDetail.roomNo" prop="roomNo">
              <el-select
                :disabled="isEditor"
                v-model="ruleForm.roomNo"
                @change="changeRoom"
              >
                <el-option
                  v-for="item in roomList"
                  :key="item.value"
                  :label="item.roomNo"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 紧急联系人1 -->
        <!-- <h3 style="margin-bottom:20px">{{ residentDetail.warningPhone1 }}</h3>
        <el-form-item :label="residentDetail.phone" prop="egPhonea">
          <el-input
            :disabled="isEditor"
            v-model.trim="ruleForm.egPhonea"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item :label="residentDetail.homePhone" prop="egPostcodea">
          <el-input
            :disabled="isEditor"
            v-model.trim="ruleForm.egPostcodea"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item :label="residentDetail.home" prop="egaAddress">
          <el-input
            type="textarea"
            :disabled="isEditor"
            v-model.trim="ruleForm.egaAddress"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <h3 style="margin-top:20px;margin-bottom:20px">
          {{ residentDetail.warningPhone2 }}
        </h3>
        <el-form-item :label="residentDetail.phone" prop="egPhoneb">
          <el-input
            :disabled="isEditor"
            v-model.trim="ruleForm.egPhoneb"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item :label="residentDetail.homePhone" prop="egPostcodeb">
          <el-input
            :disabled="isEditor"
            v-model.trim="ruleForm.egPostcodeb"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item :label="residentDetail.home" prop="egbAddress">
          <el-input
            type="textarea"
            :disabled="isEditor"
            v-model.trim="ruleForm.egbAddress"
            autocomplete="off"
          ></el-input>
        </el-form-item> -->

        <!-- 居住状态 -->
        <h3 style="margin-top: 20px">{{ residentDetail.status }}</h3>
        <!-- <p style="color:#606266">入居中</p> -->
        <el-form-item class="ruzhu_select" style="width: 290px">
          <el-select
            :disabled="!editFlag || isEditor"
            v-model="ruleForm.checkStat"
            style="width: 290px"
          >
            <el-option
              key="1"
              label="入居中（センサーON・データ書込み）"
              value="1"
            ></el-option>
            <el-option
              key="2"
              label="一時外出中（全センサーOFF）"
              value="2"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- 取消确认按钮 -->
    <div class="bottom">
      <el-button type="info" :size="size" @click="cancel">{{
        residentDetail.cancel
      }}</el-button>
      <el-button v-if="isEditor" type="primary" :size="size" @click="print">{{
        residentDetail.print
      }}</el-button>
      <el-button type="success" v-if="isEditor" :size="size" @click="editor">{{
        residentDetail.editor
      }}</el-button>
      <el-button type="warning" v-else :size="size" @click="enter">{{
        residentDetail.enter
      }}</el-button>
      <!-- <el-button type="danger" v-if="!isEditor" :size="size" @click="initial">{{
        residentDetail.initial
      }}</el-button> -->
    </div>
  </div>
</template>
<script>
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
export default {
  data() {
    return {
      residentDetail: this.$t("m.residentDetail"), //引入 lang 里面的字符串资源,
      isEditor: true, //是否编辑
      type: "", //add是添加 fix是修改
      id: "", //数据的id
      size: "medium",
      editFlag: false, //是否是新增老人
      ruleForm: {
        oldmanNo: "",
        oldSurname: "",
        oldFirstName: "",
        oldSurnameSpell: "",
        oldNameSpell: "",
        roomId: "",
        floor: "",
        checkStat: "1",
        buildingName: "",
        egPhonea: "",
        egPostcodea: "",
        egaAddress: "",
        egPhoneb: "",
        egPostcodeb: "",
        egbAddress: "",
        roomNo: "",
      },
      buildList: [],
      buildingId: 0,
      //buildingName:'',
      floorList: [],
      floorNo: 0,
      roomList: [],
      roomId: 0,
      onlyRoomId: 0,
      DefaultSetting: {}, //施设默认值
      acceptLanguage: "ja_JP", //数据请求传参需要传的语言  ja_JP----日文
    };
  },
  methods: {
    //返回
    cancel() {
      bus.$emit("homePage", {
        type: "remove",
        path: "/ResidentDetail",
        showpath: "/ResidentManagement",
      });
    },

    //打印
    print() {
      this.$print(this.$refs.habitableroomDetail);
    },

    //编辑按钮
    editor() {
      this.isEditor = false;
    },

    //初始化居室设置
    initial() {
      if (this.roomId) {
        console.log(this.roomId);
        this.$get(
          "dmc/defaultLifeTransducerConfig",
          { groupId: sessionStorage.getItem("groupId") },
          this.acceptLanguage
        ).then((res) => {
          console.log(res);
          this.DefaultSetting = res;
          this.initialSensor(this.roomId);
        });
      } else {
        this.$message({
          message: this.residentDetail.selectRoom,
          type: "error",
        });
      }
    },

    initialSensor(roomId) {
      let params = {};
      params.roomId = roomId;
      params.toiletAttentionTime = String(
        this.DefaultSetting.toiletAttentionTime
      );
      params.toiletWarningTime = String(this.DefaultSetting.toiletWarningTime);
      params.toiletUnusualTime = String(this.DefaultSetting.toiletUnusualTime);
      params.temperatureMaximum = String(
        this.DefaultSetting.temperatureMaximum
      );
      params.temperatureMinimum = String(
        this.DefaultSetting.temperatureMinimum
      );
      params.breathMaxTimes = String(this.DefaultSetting.breathMaxTimes);
      params.breathMinTimes = String(this.DefaultSetting.breathMinTimes);
      params.heartbeatMinimum = String(this.DefaultSetting.heartbeatMinimum);
      params.heartbeatMaximum = String(this.DefaultSetting.heartbeatMaximum);
      params.vitalMeasuringTimeInterval = String(
        this.DefaultSetting.vitalMeasuringTimeInterval
      );
      params.leaveBedMeasuringTimeInterval = String(
        this.DefaultSetting.leaveBedMeasuringTimeInterval
      );
      params.walkMeasuringStartTime = String(
        this.DefaultSetting.walkMeasuringStartTime
      );
      params.walkMeasuringEndTime = String(
        this.DefaultSetting.walkMeasuringEndTime
      );
      params.walkMeasuringTimeInterval = String(
        this.DefaultSetting.walkMeasuringTimeInterval
      );
      params.cameraCheckTime = String(this.DefaultSetting.cameraCheckTime);
      params.leaveRoomAlertStartTime = String(
        this.DefaultSetting.leaveRoomAlertStartTime
      );
      params.leaveRoomAlertEndTime = String(
        this.DefaultSetting.leaveRoomAlertEndTime
      );
      params.cameraBedTime = String(this.DefaultSetting.cameraBedTime);
      params.fillDuration = String(this.DefaultSetting.fillDuration);
      params.leaveDuration = String(this.DefaultSetting.leaveDuration);
      params.leaveRoomDuration = String(this.DefaultSetting.leaveRoomDuration);
      params.leaveBedSound = this.DefaultSetting.leaveBedSound;
      params.beforeDuration = String(this.DefaultSetting.beforeDuration);
      params.afterDuration = String(this.DefaultSetting.afterDuration);
      params.temperatureMeasuringTimeInterval = "100";
      params.tumbleMeasuringFrame = "1";
      console.log(params);
      this.$put(
        "dmc/lifeTransducerConfig",
        params,
        "FORM-DATA",
        this.acceptLanguage
      ).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({ message: res.message, type: "success" });
        } else {
          this.$message({ message: res.message, type: "error" });
        }
      });
    },

    //查询详情
    getDtail(id) {
      let param = {
        pageNum: 1,
        pageSize: 1,
        oldmanId: id,
      };
      this.$postForm(
        "omc/lifeOldman/queryLifeOldmanWithPage",
        param,
        this.acceptLanguage
      ).then((res) => {
        this.ruleForm = res.result.list[0];
        this.ruleForm.checkStat = "" + res.result.list[0].checkStat;
        this.roomId = res.result.list[0].roomId;
        this.onlyRoomId = res.result.list[0].roomId;
        this.buildingId = res.result.list[0].buildingId;
        this.floorNo = this.ruleForm.floor;
        this.ruleForm.roomNo = res.result.list[0].roomNo;
        //查楼层
        // this.getFloorList(res.result.list[0].buildingId);
        this.getRoomList();
      });
    },

    //添加确认按钮
    enter() {
      if (this.type == "add") {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            let param = {};
            param = this.ruleForm;
            param.roomId = this.roomId;
            this.$postJson(
              "omc/lifeOldman/addLifeOldman",
              param,
              this.acceptLanguage
            ).then((res) => {
              if (res.code == 200) {
                this.$router.push({ path: "/ResidentManagement" });
                this.$message({ message: res.message, type: "success" });
                bus.$emit("changeResident");
              } else {
                this.$message({ message: res.message, type: "error" });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else if (this.type == "fix") {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            let param = {};
            param = this.ruleForm;
            param.roomId = this.roomId;
            //param.id = this.id;
            this.$postJson(
              "omc/lifeOldman/updateById",
              param,
              this.acceptLanguage
            ).then((res) => {
              if (res.code == 200) {
                this.$message({ message: res.message, type: "success" });
                bus.$emit("homePage", {
                  type: "remove",
                  path: "/ResidentDetail",
                  showpath: "/ResidentManagement",
                });
                bus.$emit("changeResident");
              } else {
                this.$message({ message: res.message, type: "error" });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    },

    //获取楼栋列表
    getBuildList() {
      this.$postForm("omc/Building/showAll", {}, this.acceptLanguage).then(
        (res) => {
          this.buildList = res.result;
        }
      );
    },

    //选择楼栋
    changeBuild(val) {
      this.floorList = []; //清空
      this.roomList = [];
      this.ruleForm.floor = "";
      this.ruleForm.roomNo = "";
      this.buildingId = val;
      let buildList = this.buildList.filter((item) => {
        return item.buildingId == val;
      });
      this.ruleForm.buildingName = buildList[0].buildingName;
      //根据楼栋查楼层
      this.getFloorList(val);
    },

    //根据楼栋查楼层
    getFloorList(val) {
      this.$postForm(
        "omc/Building/selectById",
        { buildingId: val },
        this.acceptLanguage
      ).then((res) => {
        for (var i = 0; i < res.result.floorNum; i++) {
          this.floorList.push({ floorNo: i + 1 });
        }
      });
      this.changeFloor(1);
    },

    //选择楼层
    changeFloor(val) {
      this.floorNo = val;
      this.getRoom();
    },

    //根据楼栋楼层获取房间
    getRoom() {
      this.roomList = []; //清空
      this.ruleForm.roomNo = "";
      this.ruleForm.roomId = "";
      this.getRoomList();
    },

    //根据楼栋楼层获取房间
    getRoomList() {
      let param = {
        floorNo: 1,
        buildingId: this.buildingId,
        roomId: this.onlyRoomId,
        pageNum: 1,
        pageSize: 1000,
      };
      console.log(param, "this.ruleForm.roomId");
      this.$get("omc/Room/notLifeRooms", param, this.acceptLanguage).then(
        (res) => {
          this.roomList = res;
        }
      );
    },

    //获取房间id
    changeRoom(val) {
      this.roomId = val;
      //获取roomNo
      let ChoseRoom = this.roomList.filter((item) => {
        return item.id == val;
      });
      this.ruleForm.roomNo = ChoseRoom[0].roomNo;
    },
  },
  computed: {
    rules() {
      return {
        oldmanNo: [
          {
            required: true,
            message: this.$t("m.residentDetail.null"),
            trigger: "blur",
          },
          {
            min: 1,
            max: 12,
            message: this.$t("m.residentDetail.length12"),
            trigger: "blur",
          },
        ],
        oldSurname: [
          {
            required: true,
            message: this.$t("m.residentDetail.null"),
            trigger: "blur",
          },
          {
            min: 1,
            max: 9,
            message: this.$t("m.residentDetail.length9"),
            trigger: "blur",
          },
        ],
        oldFirstName: [
          // {
          //   required: false,
          //   message: this.$t("m.residentDetail.null"),
          //   trigger: "blur",
          // },
          {
            min: 0,
            max: 9,
            message: this.$t("m.residentDetail.length9"),
            trigger: "blur",
          },
        ],
        oldSurnameSpell: [
          // {
          //   required: false,
          //   message: this.$t("m.residentDetail.null"),
          //   trigger: "blur",
          // },
          {
            min: 0,
            max: 9,
            message: this.$t("m.residentDetail.length9"),
            trigger: "blur",
          },
          // {
          //   pattern: /^[ァ-ヶ]+$/,
          //   message: this.$t("m.residentDetail.name_limit"),
          // },
        ],
        oldNameSpell: [
          // {
          //   required: false,
          //   message: this.$t("m.residentDetail.null"),
          //   trigger: "blur",
          // },
          {
            min: 0,
            max: 9,
            message: this.$t("m.residentDetail.length9"),
            trigger: "blur",
          },
          // {
          //   pattern: /^[ァ-ヶ]+$/,
          //   message: this.$t("m.residentDetail.name_limit"),
          // },
        ],
        roomNo: [
          {
            required: true,
            message: this.$t("m.residentDetail.null"),
            trigger: "change",
          },
        ],
        floor: [
          {
            required: true,
            message: this.$t("m.residentDetail.null"),
            trigger: "change",
          },
        ],
        buildingName: [
          {
            required: true,
            message: this.$t("m.residentDetail.null"),
            trigger: "change",
          },
        ],
        egPhonea: [
          {
            required: true,
            message: this.$t("m.residentDetail.null"),
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: this.$t("m.residentDetail.length20"),
            trigger: "blur",
          },
        ],
        egPostcodea: [
          {
            required: true,
            message: this.$t("m.residentDetail.null"),
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: this.$t("m.residentDetail.length20"),
            trigger: "blur",
          },
        ],
        egaAddress: [
          {
            required: true,
            message: this.$t("m.residentDetail.null"),
            trigger: "blur",
          },
          {
            min: 1,
            max: 128,
            message: this.$t("m.residentDetail.length128"),
            trigger: "blur",
          },
        ],
        egPhoneb: [
          {
            min: 1,
            max: 20,
            message: this.$t("m.residentDetail.length20"),
            trigger: "blur",
          },
        ],
        egPostcodeb: [
          {
            min: 1,
            max: 20,
            message: this.$t("m.residentDetail.length20"),
            trigger: "blur",
          },
        ],
        egbAddress: [
          {
            min: 1,
            max: 128,
            message: this.$t("m.residentDetail.length128"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  mounted() {
    this.getBuildList();
    this.type = sessionStorage.getItem("intoType");
    if (this.type == "fix") {
      this.editFlag = true;
      this.id = sessionStorage.getItem("oldmanId");
      this.getDtail(this.id);
    } else {
      this.isEditor = false;
    }
  },
};
</script>
<style lang="scss" scoped>
/deep/ .el-form-item__label {
  padding: 0 0 0px !important;
  line-height: 10px !important;
  color: #0000ff !important;
  margin-top: 4px !important;
}
/deep/ input {
  width: 150px;
  margin-top: 6px !important;
  border: none !important;
  border-bottom: 2px solid #cccccc !important;
  border-radius: 1px;
  background: #f6f6f6 !important;
}
/deep/ textarea {
  width: 250px;
  margin-top: 6px !important;
  border: none !important;
  border-bottom: 2px solid #cccccc !important;
  border-radius: 1px;
  background: #f6f6f6 !important;
}

/deep/ .ruzhu_select .el-input--suffix .el-input__inner {
  width: 290px;
  color: #333333;
}

.habitableroomDetail {
  .top {
    display: flex;
    align-items: center;
    .border {
      width: 10px;
      height: 30px;
      background: black;
      margin-right: 10px;
    }
  }
  .main {
    margin-left: 20px;
    margin-top: 20px;
    p {
      color: #ff0000;
      margin-top: 10px;
    }
  }
  .bottom {
    width: 600px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
